<template>
    <div>
        <div style="margin: 10px;">
            <!-- 搜索栏 -->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="手机号">
                    <el-input v-model="searchObj.mobile" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="用户类型">
                    <el-select v-model="searchObj.userType" placeholder="请选择">
                        <el-option label="出借人" value=1></el-option>
                        <el-option label="借款人" value=2></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-select v-model="searchObj.status" placeholder="请选择">
                        <el-option label="锁定" value=0></el-option>
                        <el-option label="正常" value=1></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleClear">清除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 用户信息展示列表 -->
        <div style="text-align: center;">
            <el-table :data="list" style="width: 100%">
                <el-table-column label="序号" type="index">
                </el-table-column>
                <el-table-column label="用户类型" prop="userType">
                    <!-- 用户类型 1：出借人 2：借款人 -->
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.userType === 0">未绑定</el-tag>
                        <el-tag type="success" v-if="scope.row.userType === 1">投资人</el-tag>
                        <el-tag type="warning" v-if="scope.row.userType === 2">借款人</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="mobile">
                </el-table-column>
                <el-table-column label="用户姓名" prop="name">
                </el-table-column>
                <el-table-column label="身份证号" prop="idCard">
                </el-table-column>
                <el-table-column label="用户积分" prop="integral">
                </el-table-column>
                <el-table-column label="注册时间" prop="createTime" width="180px">
                </el-table-column>
                <el-table-column label="绑定状态" prop="bindStatus">
                    <!-- 绑定状态（0：未绑定，1：绑定成功 -1：绑定失败） -->
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.bindStatus === 0">未绑定</el-tag>
                        <el-tag type="success" v-if="scope.row.bindStatus === 1">绑定成功</el-tag>
                        <el-tag type="warning" v-if="scope.row.bindStatus === -1">绑定失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="用户状态" prop="status">
                    <!-- 状态（0：锁定 1：正常） -->
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.status === 0">锁定</el-tag>
                        <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="right" label="操作" width="180px" style="text-align: left;">
                    <template slot-scope="scope">
                        <el-button size="mini" :type="Number(scope.row.status) != 0 ? 'danger' : 'success'"
                            @click="changeLock(scope.$index, scope.row)">
                            {{ Number(scope.row.status) != 0 ? '锁定' : '解锁' }}</el-button>
                        <el-button size="mini" type="primary" @click="showLoging(scope.$index, scope.row)">登录日志</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="block" style="text-align: center;margin-top: 15px;">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageNum" :page-sizes="[3, 6, 9, 10]" :page-size="pageSize"
                layout="sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div> -->
        <div class="block" style="text-align: center;margin-top: 15px;">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageNum" :page-sizes="[3, 6, 9, 10]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="登录日志" :visible.sync="dialogTableVisible">
                <el-table :data="logRecord">
                    <el-table-column  label="序号" type="index" width="150"></el-table-column>
                    <el-table-column property="ip" label="ip" width="200"></el-table-column>
                    <el-table-column property="createTime" label="登录时间"></el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import api from '@/api/userInfo'
export default {
    data() {
        return {
            dialogTableVisible: false,
            searchObj: {},
            list: [],
            pageNum: 1,
            pageSize: 3,
            total: 0,
            logRecord: []
        }
    },
    methods: {
        handleSizeChange(value) {
            // console.log(value);
            this.pageSize = value
            this.fetchData()
        },
        handleCurrentChange(value) {
            // console.log(value);
            this.pageNum = value
            this.fetchData()
        },
        //执行查询条件的方法
        handleSearch() {
            this.fetchData()
        },
        //清除查询条件的方法
        handleClear() {
            //将查询的条件置为空
            this.searchObj = {}
            //设置页码未1
            this.pageNum = 1
            this.pageSize = 3
            this.fetchData()
        },
        fetchData() {
            api.getPageList(this.pageNum, this.pageSize, this.searchObj).then(res => {
                // console.log(res);
                // debugger
                this.list = res.data.items.records
                this.total = Number(res.data.items.total)
            })
        },
        //锁定和解锁用户
        changeLock(index, row) {
            row.status = row.status === 0 ? 1 : 0
            api.changeStatus(row).then(res => {
                this.$message.success(res.message || '修改成功')
            })
        },
        showLoging(index, row) {
            this.dialogTableVisible = true
            api.getLogRecord(row.id).then(res=>{
                // console.log(res.data.items);
                // debugger
                this.logRecord = res.data.items
            })
        },

    },
    created() {
        this.fetchData()
    }
}
</script>